<template>
    <!--列表轮播-->
    <div class="list-container">
        <div class="sortList clearfix">
            <div class="center">
                <!--banner轮播-->
                <el-carousel :interval="2000">
                    <el-carousel-item v-for="item in images" :key="item.directives">
                        <img :src="item.src" :alt="item.alt" />
                    </el-carousel-item>
                </el-carousel>
            </div>
            <div class="right">
                <div class="news">
                    <h4>
                        <p class="fl">商城快报</p>
                        <span class="fr tip">更多</span>
                    </h4>
                    <div class="clearix"></div>
                    <ul class="news-list">
                        <li v-for="item in newsItems" :key="item.id">
                            <span class="bold">{{ item.type }}</span> {{ item.content }}
                        </li>
                    </ul>
                </div>
                <el-row class="lifeservices">
                    <el-col v-for="service in services" :key="service.name" :span="4" class="life-item">
                        <i class="list-item"></i>
                        <span class="service-intro">{{ service.name }}</span>
                    </el-col>
                </el-row>
                <div class="ads">
                    <img src="./images/ad1.png" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            images: [
                { id: 1, src: require("./images/banner1.jpg"), alt: "banner1" },
                { id: 2, src: require("./images/banner2.jpg"), alt: "banner2" },
                { id: 3, src: require("./images/banner3.jpg"), alt: "banner3" },
                { id: 4, src: require("./images/banner4.jpg"), alt: "banner4" },
            ],
            newsItems: [
                { id: 1, type: '[特惠]', content: '备战开学季 全民半价购数码' },
                { id: 2, type: '[公告]', content: '备战开学季 全民半价购数码' },
                { id: 3, type: '[特惠]', content: '备战开学季 全民半价购数码' },
                { id: 4, type: '[公告]', content: '备战开学季 全民半价购数码' },
                { id: 5, type: '[特惠]', content: '备战开学季 全民半价购数码' },
            ],
            services: [
                { name: '话费' },
                { name: '机票' },
                { name: '电影票' },
                { name: '游戏' },
                { name: '彩票' },
                { name: '加油站' },
                { name: '酒店' },
                { name: '火车票' },
                { name: '众筹' },
                { name: '理财' },
                { name: '礼品卡' },
                { name: '白条' },
            ],
        };
    },

};
</script>

<style scoped>
.el-carousel {
    height: 454px;
}

.el-carousel_container {
    height: 454px;
}

.el-carousel__item {
    height: auto;
}

.list-container {
    width: 1200px;
    margin: 0 auto;
}

.sortList {
    height: 464px;
    padding-left: 210px;
}

.center {
    box-sizing: border-box;
    width: 740px;
    height: 100%;
    padding: 5px;
    float: left;
}

.right {
    float: left;
    width: 250px;
    height: 100%;
}

.news {
    border: 1px solid #e4e4e4;
    margin-top: 5px;
    height: 240px;
}

.news h4 {
    border-bottom: 1px solid #e4e4e4;
    padding: 5px 10px;
    margin: 5px 5px 0;
    line-height: 22px;
    overflow: hidden;
    font-size: 14px;
}

.news h4 .fl {
    float: left;
}

.news h4 .fr {
    float: right;
    font-size: 12px;
    font-weight: 400;
}

.news-list {
    padding: 10px 0px;
    line-height: 26px;
    display: flex;
    flex-wrap: wrap;
}
.news-list li {
    padding: 5px 0px;
    box-sizing: border-box;

}

.news-list .bold {
    font-weight: 700;
}

.lifeservices {
    border-right: 1px solid #e4e4e4;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
}

.life-item {
    border-left: 1px solid #e4e4e4;
    border-bottom: 1px solid #e4e4e4;
    margin-right: -1px;
    height: 64px;
    text-align: center;
    position: relative;
    cursor: pointer;
    width: 25%;
}
.list-item {
    background-image: url(./images/icons.png);
    width: 61px;
    height: 40px;
    display: block;
}

.service-intro {
    line-height: 22px;
    display: block;
}

.life-item:nth-child(1) .list-item {
    background-position: -10px -5px;
}

.life-item:nth-child(2) .list-item {
    background-position: -75px -5px;
}

.life-item:nth-child(3) .list-item {
    background-position: -136px -5px;
}

.life-item:nth-child(4) .list-item {
    background-position: -200px -5px;
}

.life-item:nth-child(5) .list-item {
    background-position: -10px -76px;
}

.life-item:nth-child(6) .list-item {
    background-position: -75px -76px;
}

.life-item:nth-child(7) .list-item {
    background-position: -136px -76px;
}

.life-item:nth-child(8) .list-item {
    background-position: -203px -76px;
}

.life-item:nth-child(9) .list-item {
    background-position: -10px -146px;
}

.life-item:nth-child(10) .list-item {
    background-position: -75px -146px;
}

.life-item:nth-child(11) .list-item {
    background-position: -136px -146px;
}

.life-item:nth-child(12) .list-item {
    background-position: -203px -146px;
}

.sortList .right .ads {
    margin-top: 5px;
}

.sortList .right .ads img {
    opacity: 0.8;
    transition: all 400ms;
}

.sortList .right .ads img:hover {
    opacity: 1;
}
</style>
